<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <link rel="icon" th:href="@{/img/asset.png}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/style.css}">
    <title>BookReview</title>
    <style>

        * {
            box-sizing: border-box;
        }

        /* body 样式 */
        body {
            font-family: Arial;
            margin: 0;
        }

        /* 标题 */
        .header {
            padding: 20px;
            text-align: center;
            background-image: url("../static/img/logo.png");
            background-size: 100% 100%;
            color: white;
        }

        /* 标题字体加大 */
        .header h1 {
            font-size: 40px;
        }

        .topnav {
            overflow: hidden;
            background-color: #e9e9e9;
        }

        .topnav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        /* 右侧链接*/
        .topnav a.right {
            float: right;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #2196F3;
            color: white;
        }

        .topnav .search-container {
            float: right;
        }

        .topnav input[type=text] {
            padding: 6px;
            margin-top: 8px;
            font-size: 17px;
            border: none;
        }

        .topnav .search-container button {
            float: right;
            padding: 6px 10px;
            margin-top: 8px;
            margin-right: 16px;
            background: #ddd;
            font-size: 17px;
            border: none;
            cursor: pointer;
        }

        .topnav .search-container button:hover {
            background: #ccc;
        }

        @media screen and (max-width: 600px) {
            .topnav .search-container {
                float: none;
            }

            .topnav a, .topnav input[type=text], .topnav .search-container button {
                float: none;
                display: block;
                text-align: left;
                width: 100%;
                margin: 0;
                padding: 14px;
            }

            .topnav input[type=text] {
                border: 1px solid #ccc;
            }
        }

        /* 列容器 */
        .row {
            display: -ms-flexbox; /* IE10 */
            display: flex;
            -ms-flex-wrap: wrap; /* IE10 */
            flex-wrap: wrap;
        }

        /* 创建两个列 */
        /* 边栏 */
        .side {
            -ms-flex: 30%; /* IE10 */
            flex: 30%;
            background-color: #f1f1f1;
            padding: 20px;
        }

        /* 主要的内容区域 */
        .main {
            -ms-flex: 70%; /* IE10 */
            flex: 70%;
            background-color: white;
            padding: 20px;
        }

        /* 测试图片 */
        .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
        }

        /* 底部 */
        .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
        }

        /* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
        @media screen and (max-width: 700px) {
            .row {
                flex-direction: column;
            }
        }

        /* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
        @media screen and (max-width: 400px) {
            .navbar a {
                float: none;
                width: 100%;
            }
        }

    </style>
</head>
<body>

<div class="header">
    <h1>书评系统</h1>
</div>
<div class="topnav">
    <a class="active" href="#home">主页</a>
    <a href="#">书籍</a>
    <a href="#">评价</a>
    <a href="#">用户</a>
    <a href="#about">关于</a>
    <a href="#contact">联系我们</a>
    <a th:href="@{/indexUsers}" class="right and active">登录</a>
    <div class="search-container">
        <form action="/action_page.php">
            <input type="text" placeholder="输入关键词..." name="search">
            <button type="submit">搜索</i></button>
        </form>
    </div>
</div>

    <div id="slider">
        <div id="mask">
            <ul>
                <li id="first">
                    <a href="#"><img th:src="@{/static/img/background.jpeg}" alt="Python" title="Python"></a>
                </li>
                <li id="second">
                    <a href="#"><img th:src="@{/static/img/background2.jpeg}" alt="前端开发" title="前端开发"</a>
                </li>
                <li id="third">
                    <a href="#"><img th:src="@{/static/img/background.jpeg}" alt="Python基础教程" title="Python基础教程"></a>
                </li>
            </ul>
        </div>

    </div>

<div class="row">
    <div class="side">
        <h2>关于我</h2>
        <h5>我的照片:</h5>
        <div class="fakeimg" style="height:200px;">这边插入图像</div>
        <p>关于我的介绍..</p>
        <h3>更多内容</h3>
        <p>我的更多内容</p>
        <div class="fakeimg" style="height:60px;">这边插入图像</div>
        <br>
        <div class="fakeimg" style="height:60px;">这边插入图像</div>
        <br>
        <div class="fakeimg" style="height:60px;">这边插入图像</div>
    </div>
    <div class="main">
        <h2>标题</h2>
        <h5>副标题</h5>
        <div class="fakeimg" style="height:200px;">图像</div>
        <p>一些文本..</p>
        <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
        <br>
        <h2>标题</h2>
        <h5>副标题</h5>
        <div class="fakeimg" style="height:200px;">图像</div>
        <p>一些文本..</p>
        <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
    </div>
</div>

<div class="footer">
    <h2>学海无涯，我亦是行人</h2>
</div>
</body>
</html>